<template>
	<view class="permit">
		<view class="permit-img">
			<view class="one-title">
				<view class="code">
					<img class="img-code" src="https://admin.515f.com/static/img/gzh.3176da17.jpg" alt="">
					<view class="scale-size">公众号</view>
				</view>
				<view class="code">
					<img class="img-code" src="https://admin.515f.com/static/img/industry1.f4ec3fb2.png" alt="">
					<view class="scale-size">助业APP</view>
				</view>
				<view class="code">
					<img class="img-code" src="	https://admin.515f.com/static/img/owner.56d563d7.png" alt="">
					<view class="scale-size">业主APP</view>
				</view>
				<view class="renovation-num">装修编号: {{ permitObj.id }}</view>
			</view>
			
			<view class="renovation-certificate">
				<view class="permit-name"> 装饰装修施工许可证 </view>	
				<view class="time">施工周期：{{ permitObj.begin_time  }} ~ {{ permitObj.last_time  }}</view>	
			</view>
			
			<view class="renovation-box">
				<view class="">
					<view class="">施工地点：1-1-1-1001</view>
					<view class="">装修公司名称：{{ permitObj.renovationName }}</view>
					<view class="">施工负责人：{{ permitObj.name || '--'}}</view>
				</view>
				<view class="">
					<view class="">监督电话：{{ permitObj.proPhone || '--'}}</view>
					<view class="">负责人电话：{{ permitObj.tel || '--'}}</view>
				</view>
			</view>
			
			<view class="renovation-tips">
				提示：如发现此户装修违反装修规定和时间，请及时拨打上方监督电话，联系物业管理中心进行处理
			</view>
			
			<view class="name-time">
				<view class="">{{  permitObj.org_name }}</view>
				<view class="">{{  permitObj.proName }}</view>
				<view class="">发证时间：{{ permitObj.tiems || '--'}}</view>
			</view>
			<view class="logo">
				<img class="icon" src="https://admin.515f.com/static/img/logo.ad1f1b16.png" alt="">
				<view class="size">此许可证由助业物业管理系统自动生成</view>
			</view>
			
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				permitObj:{
					id:'',
					begin_time:'',//施工周期--开始
					last_time:'',//施工周期--结束
					renovationName:'',//装修公司name
					name:'',//公司负责人
					proPhone:'',//电话
					tel:'',
					org_name:'',//公司name
					proName:'',//具体位置
					tiems:'',//发证时间
				}
			}
		},
		onLoad(options) {
			this.id = options.id
			this.permitInterface();
		},
		methods:{
			async permitInterface(){
				let res = await this.$request.api.getPermitUrl({
					id:this.id
				}).then(res => {
					if(res.data.success){
						let dataObj = res.data.data;
						this.permitObj.id = dataObj.id;
						this.permitObj.begin_time = dataObj.begin_time
						this.permitObj.last_time = dataObj.last_time
						this.permitObj.renovationName = dataObj.renovationName
						this.permitObj.name = dataObj.name;
						this.permitObj.proPhone = dataObj.proPhone;
						this.permitObj.tel = dataObj.tel;
						this.permitObj.org_name = dataObj.org_name
						this.permitObj.proName = dataObj.proName
						this.permitObj.tiems = dataObj.tiems
						
					}
				})	
					
			}
		}
	}
</script>

<style lang="scss">
	.permit{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-top: 20rpx;
		.permit-img{
			position: relative;
			background:url("https://admin.515f.com/static/img/zhengshu2.0f949724.jpg") no-repeat;
			width: 100%;
			height: 860rpx;
			background-size: 100% 100%;
			margin: 20rpx;
			padding: 50rpx 38rpx 0;
			.one-title{
				display: flex;
				text-align: center;
				// margin: 40rpx 40rpx 0;
			}
			.code{
				display: flex;
				flex-direction: column;
				align-items: center;
				width:90rpx;
			}
			.img-code{
				width: 80rpx;
				height: 80rpx;
			}
			.scale-size{
				scale:.5;
				width: 200rpx;
			}
			.renovation-num{
				flex: auto;
				text-align: right;
				font-weight: bold;
				font-size: 14px;
			}
			
			.renovation-certificate{
				text-align: center;
				font-weight: bold;
				margin-top: 10rpx;
				.permit-name{
					font-weight: bold;
					font-family: cursive;
					font-size: 50rpx;
				}
				.time{
					color: #7b7676;
					font-size: 14px;
					margin-top: 6rpx;
				}
			}
			.renovation-box{
				margin-top: 20rpx;
				line-height: 50rpx;
			}
			
		}
		.renovation-tips{
			margin-top: 10rpx;
			color: #7b7676;
		}
		.name-time{
			margin-top: 20rpx;
			color: #7b7676;
			float: right;
			text-align: right;
		}
		.logo{
				clear: both;
				position: absolute;
				bottom: 16rpx;
				margin-left: 88rpx;
				display: flex;
			  align-items: center;
			.icon{
				width: 40rpx;
				height: 40rpx;
				
			}
			.size{
				scale: .8;
				font-size: 12px;
				color: #7b7676;
				margin-left: -34rpx;
			}
		}
	}
</style>